<template>
  <!-- 主体 -->
  <div class="bgc">
    <div class="dashboard-container">
      <el-row :gutter="20">
        <el-col :span="9">
          <div class="GongDan">
            <div class="header">
              <div class="title">
                工单统计 <span class="sub-title">2022.11.01 ~ 2022.11.23</span>
              </div>
            </div>
            <div class="body">
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">417</div>
                  <div class="text color2">工单总数（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">0</div>
                  <div class="text color2">完成工单（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">0</div>
                  <div class="text color2">进行工单（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">415</div>
                  <div class="text color2">取消工单（个）</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="XiaoShou">
            <div class="header">
              <div class="title">
                销售统计 <span class="sub-title">2022.11.01 ~ 2022.11.23</span>
              </div>
            </div>
            <div class="body">
              <div class="stats">
                <div class="item">
                  <div class="num color3 text-shadow2">10325</div>
                  <div class="text color4">订单量（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color3 text-shadow2">7.28</div>
                  <div class="text color4">销售额（万元）</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="18">
          <div class="XiaoShouShuJu">
            <div class="header">
              <div class="title">
                销售数据 <span class="sub-title">2022.11.01 ~ 2022.11.23</span>
              </div>
              <div class="week-month-year">
                <div class="item is-checked">周</div>
                <div class="item">月</div>
                <div class="item">年</div>
              </div>
            </div>
            <div class="charts">
              <div ref="box1" class="chart" style="width:400px ;height:320px" />
              <div ref="box2" class="chart" style="width:400px ;height:280px" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="ShangPingReBang">
            <div class="header">
              <div class="title">
                商品热榜 <span class="sub-title">2022.11.01 ~ 2022.11.23</span>
              </div>
            </div>
            <div class="body">
              <el-row :gutter="20">
                <el-col>
                  <div class="el-col-5">
                    <div class="top top1">1</div>
                  </div>
                  <div class="el-col-13">
                    <div class="sku-name">统一阿萨姆奶茶</div>
                  </div>
                  <div class="el-col-6">
                    <div class="count">1148单</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>

        <el-col :span="13">
          <div class="Top">
            <div class="header">
              <div class="title">
                合作商点位数Top5
              </div>
              <div class="more">
                <i class="el-icon-more" />
              </div>
            </div>
            <div class="charts">
              <div ref="box3" class="chart" style="width:450px ;height:280px" />
              <div class="collect">
                <div class="count">16</div>
                <div class="name">点位数</div>
                <div class="count count2">8</div>
                <div class="name">合作商数</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="Top">
            <div class="header">
              <div class="title">
                异常设备监控
              </div>
              <div class="more">
                <i class="el-icon-more" />
              </div>
            </div>
            <div class="empty">
              <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
              <div class="tips">暂无数据</div>
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { gettaskReportInfo } from '@/api/dataS'
import { getDate } from '@/utils/date'
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      nowdate: {},
      taskReportInfo: []
    }
  },
  async created() {
    this.nowdate = getDate()
    const data = await gettaskReportInfo(this.nowdate.start, this.nowdate.end)
    console.log(data)
    this.taskReportInfo = data
  },
  computed: {
    ...mapGetters(['name'])
  },
  mounted() {
    const myChart1 = echarts.init(this.$refs.box1)
    myChart1.setOption({
      title: {
        left: 'center',
        text: '销售额趋势图'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['星期一', '星期二', '星期三']
      },
      yAxis: {
        type: 'value',
        name: '单位：元'
      },
      series: [
        {
          data: [3412.38, 3550.13, 0],
          itemStyle: {
            color: 'rgba(216, 20, 20, 1)'
          },
          type: 'line',
          smooth: true,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(216, 20, 20, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(216, 20, 20, 0)'
              }
            ])
          }
        }
      ]
    })
    const myChart2 = echarts.init(this.$refs.box2)
    myChart2.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      title: {
        left: 'center',
        text: '销售额分布'
      },
      xAxis: [
        {
          type: 'category',
          data: ['北京平', '霍营街'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位：元'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '10%',
          data: [8082.73, 979.9],
          itemStyle: {
            shadowColor: '#91cc75',
            borderType: 'dashed',
            // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
            normal: {
              // 柱形图圆角，初始化效果
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        }
      ]
    })
    const myChart3 = echarts.init(this.$refs.box3)
    myChart3.setOption({
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          color: ['#92b7ff', '#a8ffcf', '#ffc298', '#d9ffff', '#d1e0fd'],
          name: 'Access From',
          type: 'pie',
          radius: ['25%', '70%'],
          center: ['50%', '60%'],
          roseType: 'radius',
          labelLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          label: {
            formatter: '{b|{b}} \n {per|{d}%}',
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center'
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold'

              },
              per: {
                color: '#000',
                padding: [3, 4],
                borderRadius: 4
              }
            }
          },
          data: [
            { value: 62.5, name: '金燕龙合作商' },
            { value: 12.5, name: '天华物业' },
            { value: 12.5, name: '北京合作商' },
            { value: 6.25, name: 'likede' },
            { value: 6.25, name: '佳佳' }
          ]
        }
      ]
    })
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.bgc {
  width: 100%;
  height: 100%;
  background-color: rgb(245, 245, 245);
  color: rgb(216, 20, 20);
}
.dashboard {
  &-container {
    padding:  30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .GongDan {
    height: 166px;
    padding: 20px;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: calc(20vh - 24px);
    min-height: 166px;
    border-radius: 20px;
    background: #e9f3ff;
    background-image: url(),url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    .header {
    display: flex;
      .title{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        .sub-title {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
    }
    .body {
      flex: 1;
      display: flex;
      .stats {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        flex: 1;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        .item {
          box-sizing: border-box;
          display: inline-flex;
          flex-direction: column;
          .num {
            height: 50px;
            font-size: 36px;
            font-weight: 600;
            line-height: 50px;
          }
          .color1 {
            color: #072074;
          }
          .text-shadow1 {
            text-shadow: 2px 4px 7px rgba(85,132,255,.5);
          }
          .text {
            height: 17px;
            margin-top: 3px;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
          }
          .color2 {
            color: #91a7dc;
          }
        }
      }
    }
  }
  .XiaoShou {
    height: 166px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: calc(20vh - 24px);
    min-height: 166px;
    border-radius: 20px;
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
    .header {
    display: flex;
       .title{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        .sub-title {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
    }
    .body {
      flex: 1;
      display: flex;
      .stats {
        -webkit-box-flex: 1;
        flex: 1;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        .item {
          box-sizing: border-box;
          display: inline-flex;
          flex-direction: column;
          .num {
            height: 50px;
            font-size: 36px;
            font-weight: 600;
            line-height: 50px;
          }
          .color3 {
            color: #ff5757;
          }
          .text-shadow2 {
            text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          }
          .text {
            height: 17px;
            margin-top: 3px;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
          }
          .color4 {
            color: #de9690;
          }
        }
      }
    }
  }
  .XiaoShouShuJu {
    padding: 20px;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: calc(40vh - 68px);
    min-height: 352px;
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    .header {
    display: flex;
      .title{
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        .sub-title {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
      .week-month-year {
          -webkit-box-direction: normal;
          box-sizing: border-box;
          width: 129px;
          height: 34px;
          background: rgba(233,243,255,.37);
          border-radius: 10px;
          display: flex;
          -webkit-box-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          align-items: center;
        .item {
          text-align: center;
          line-height: 25px;
          width: 37px;
          height: 25px;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
        }
        .is-checked {
          background: #fff;
          box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
          border-radius: 7px;
          font-weight: 600;
          color: #333;
        }
      }
    }
    .charts {
      -webkit-box-flex: 1;
      flex: 1;
      display: flex;
      .chart {
        position: relative;
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
  .ShangPingReBang {
    padding: 20px;
    margin-top: -165px;
    flex-direction: column;
    height: calc(60vh - 72px);
    min-height: 538px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    .header {
    display: flex;
      .title{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        .sub-title {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
    }
    .body {
      display: flex;
      -webkit-box-flex: 1;
      flex: 1;
      flex-direction: column;
      -webkit-box-pack: justify;
      justify-content: space-between;
      margin-top: 20px;
      // .top {
      //   display: inline-block;
      //   margin-left: 10px;
      //   text-align: center;
      //   font-size: 12px;
      //   line-height: 14px;
      // }
        .top{
          width: 16px;
          height: 20px;
          margin-left: 10px;
          background: url();
          text-align: center;
          font-size: 12px;
          color: #e9b499;
          line-height: 14px;
        }
      .top1{
        width: 21px;
        height: 20px;
        background: url();
        color: #8e5900;
      }
      .top2{
        width: 21px;
        height: 20px;
        background: url();
        color: #494949;
      }
      .top3{
        width: 21px;
        height: 20px;
        background: url();
        color: #cf6d3d;
      }
      .sku-name {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .count {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #737589;
        line-height: 20px;
        text-align: right;
      }
      .el-col{
        float: left;
        box-sizing: border-box;
      }
      .el-col-5 {
        width: 20%;
      }
       .el-col-13 {
        width: 55%;
      }
       .el-col-6 {
        width: 25%;
      }
    }
  }
  .Top {
    padding: 20px;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: calc(40vh - 68px);
    min-height: 352px;
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    .header {
    display: flex;
      .title{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        .sub-title {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
      .more {
        width: 18px;
        height: 18px;
        border: 2px solid #5f84ff;
        border-radius: 50%;
        text-align: center;
        line-height: 12px;
        .el-icon-more{
          color: #5f84ff;
          font-size: 11px;
        }
      }
    }
    .charts {
      -webkit-box-flex: 1;
      flex: 1;
      display: flex;
      .chart {
        position: relative;
        display: inline-block;
        margin-left: 20px;
      }
      .collect {
        width: 154px;
        height: 230px;
        margin-top: 35px;
        padding-top: 47px;
        padding-left: 38px;
        background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        .count {
          height: 33px;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
          line-height: 33px;
        }
        .count2 {
          margin-top: 20px;
        }
        .name {
          height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #000412;
          line-height: 17px;
        }
      }
    }
    .empty {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img {
        border-style: none;
      }
      .tips {
        margin-top: 25px;
        color: #20232a;
        font-size: 14px;
      }
    }
  }
</style>
